<template>
  <div class="outer">
    <div class="box">
      <header class="header fix">
        <a href="javascript:;" class="backImg" @click="back"></a>
        <p class="titleCity">选去程:{{$store.state.flight.go}}--{{$store.state.flight.back}}</p>
      </header>
      <div class="title fix">
        <div class="titleDate">{{flight.month}}月{{flight.day}}日 {{flight.Sunday}}</div>
        <div class="fix">
          <div class="title1 fix">
            <p class="titleGoDate">
              {{flightTo.currentList.fromTime}}
            </p>
            <p class="titleLineMiddle"></p>
            <p class="titleBackDate">
              {{flightTo.currentList.toTime}}
            </p>
          </div>
          <div class="title2 fix">
            <p class="titleGoCity">
              {{flightTo.currentList.fromInfo}}
            </p>
            <p class="flightDuration">
              {{flightTo.currentList.costTime}}
            </p>
            <p class="titleBackCity">
              {{flightTo.currentList.toInfo}}
            </p>
          </div>
          <div class="title3 fix">
            <p class="titleGoType">
              {{flightTo.currentList.carrierInfo}}
            </p>
            <p class="titleLineInfo">
              {{this.flightType}}
            </p>
            <p class="titleBackType" v-if="flightTo.currentList.mealType">
              <i class="iconfont icon-tangshi"></i>
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="main">
      <scroll  style="overflow: hidden;position: absolute;top: 0;left: 0;right: 0;bottom: 0" >
        <ul>
          <li class="item fix" v-for="(arr, key, indexs) in flightTo.currentList.cabinMap">
            <div class="detail-title" v-if="arr.length > 0 && key === 'CUSTOMER_AGREEMENT'">大客户协议价</div>
            <div class="detail-title" v-if="arr.length > 0 && key === 'CARRIER_DIRECT'">航司直销</div>
            <div class="detail-title" v-if="arr.length > 0 && key === 'BUSINESS_OPTIMIZATION'">商务优选</div>
            <div v-for="(item, index) in arr" v-if="arr.length > 0" class="item-flex">
              <div class="l itemSub">
                <div class="fix">
                  <!--<p class="cangwei" v-if="item.grade==='Y'">经济舱&nbsp;{{item.subCabinCode}}<span v-if="!item.subCabinCode">{{item.cabinCode}}</span>
                  </p>
                  <p class="cangwei" v-if="item.grade==='C'">公务舱&nbsp;{{item.subCabinCode}}<span v-if="!item.subCabinCode">{{item.cabinCode}}</span>
                  </p>
                  <p class="cangwei" v-if="item.grade==='F'">头等舱&nbsp;{{item.subCabinCode}}<span v-if="!item.subCabinCode">{{item.cabinCode}}</span>
                  </p>-->
                  <p class="discount1" v-show="item.isDirect">航司直营</p>
                  <p class="money"><span class="moneyIco">￥</span>{{item.salePrice}}</p>
                </div>
                <div>
                  <span class="cangwei" v-if="item.grade==='Y'">经济舱&nbsp;{{item.subCabinCode}}<span v-if="!item.subCabinCode">{{item.cabinCode}}</span>
                  </span>
                  <span class="cangwei" v-if="item.grade==='C'">公务舱&nbsp;{{item.subCabinCode}}<span v-if="!item.subCabinCode">{{item.cabinCode}}</span>
                  </span>
                  <span class="cangwei" v-if="item.grade==='F'">头等舱&nbsp;{{item.subCabinCode}}<span v-if="!item.subCabinCode">{{item.cabinCode}}</span>
                  </span>
                  <span class="discount-riles" v-if="item.discount">{{item.discount}}</span>
                  <span class="quit-ticket-rules"
                        v-if="quitTicketRule.length> 0"
                        v-show="quitTicketRule[index]['minPrice'] === -1"
                        @click="onShowPopupRule(item.cabinCode, item.salePrice, item, index)">退改签规定></span>
                  <span class="quit-ticket-rules"
                        v-if="quitTicketRule.length> 0"
                        v-show="quitTicketRule[index]['minPrice'] === 0"
                        @click="onShowPopupRule(item.cabinCode, item.salePrice, item, index)">{{quitTicketRule[index]['typeMsg']}}></span>
                  <span class="quit-ticket-rules"
                        v-if="quitTicketRule.length> 0"
                        v-show="quitTicketRule[index]['minPrice'] !== 0 && quitTicketRule[index]['minPrice'] !== -1"
                        @click="onShowPopupRule(item.cabinCode, item.salePrice, item, index)">退改￥{{quitTicketRule[index]['minPrice']}}起></span>
                  <span class="r money" v-if="parseInt(item.restSeatNum) < 10">剩{{item.restSeatNum}}张</span>
                </div>
              </div>
              <div class="r r-money">
                <div class="yuding" @click="yuding(item,index)" v-if="item.withinTwoHoursLowestPrice">
                  <div class="yudingText">预订</div>
                  <div class="lowPrice">低价</div>
                </div>
                <div class="yuding" @click="yuding(item,index)" v-else>
                  <div>预订</div>
                </div>
              </div>
            </div>
          </li>
        </ul>
        <!--<ul>-->
        <!--<li class="item fix" v-for="(item,index) in flightTo.currentList.cabinShowList" v-if="item.grade">-->
          <!--<div class="l itemSub">-->
            <!--<div class="fix">-->
              <!--<p class="cangwei" v-if="item.grade==='Y'">经济舱&nbsp;{{item.subCabinCode}}<span v-if="!item.subCabinCode">{{item.cabinCode}}</span></p>-->
              <!--<p class="cangwei" v-if="item.grade==='C'">公务舱&nbsp;{{item.subCabinCode}}<span v-if="!item.subCabinCode">{{item.cabinCode}}</span></p>-->
              <!--<p class="cangwei" v-if="item.grade==='F'">头等舱&nbsp;{{item.subCabinCode}}<span v-if="!item.subCabinCode">{{item.cabinCode}}</span></p>-->
              <!--<p class="discount1" v-show="item.isDirect">航司直营</p>-->
              <!--<p class="money"><span class="moneyIco">￥</span>{{item.salePrice}}</p>-->
            <!--</div>-->
            <!--<div>-->
              <!--<span>{{item.discount}}</span>-->
              <!--<span class="quit-ticket-rules"-->
                    <!--v-if="quitTicketRule.length> 0"-->
                    <!--v-show="quitTicketRule[index]['minPrice'] === -1"-->
                    <!--@click="onShowPopupRule(item.cabinCode, item.salePrice, item, index)">退改签规定></span>-->
              <!--<span class="quit-ticket-rules"-->
                    <!--v-if="quitTicketRule.length> 0"-->
                    <!--v-show="quitTicketRule[index]['minPrice'] === 0"-->
                    <!--@click="onShowPopupRule(item.cabinCode, item.salePrice, item, index)">{{quitTicketRule[index]['typeMsg']}}></span>-->
              <!--<span class="quit-ticket-rules"-->
                    <!--v-if="quitTicketRule.length> 0"-->
                    <!--v-show="quitTicketRule[index]['minPrice'] !== 0 && quitTicketRule[index]['minPrice'] !== -1"-->
                    <!--@click="onShowPopupRule(item.cabinCode, item.salePrice, item, index)">退改￥{{quitTicketRule[index]['minPrice']}}起></span>-->
              <!--<span class="r money" v-if="parseInt(item.restSeatNum) < 10">剩{{item.restSeatNum}}张</span>-->
            <!--</div>-->
          <!--</div>-->
          <!--<div class="r">-->
            <!--<div class="yuding" @click="yuding(item,index)" v-if="item.withinTwoHoursLowestPrice">-->
              <!--<div class="yudingText">预订</div>-->
              <!--<div class="lowPrice">低价</div>-->
            <!--</div>-->
            <!--<div class="yuding" @click="yuding(item,index)" v-else>-->
              <!--<div>预订</div>-->
            <!--</div>-->
          <!--</div>-->
        <!--</li>-->
      <!--</ul>-->
      </scroll>
    </div>
    <!--退票规则弹框-->
    <div v-transfer-dom>
      <Popup v-model="popupQuitRulesVisible" position="bottom" height="100%" style="background-color: #fff;overflow: hidden">
        <flight-quit-rule @bookingTicket="bookingTicket"
                          @closePopupContent="closePopupContent"
                          :isShowBtn = true
                          :navList="navList"
                          :beforeRefundTime="beforeRefundTime"
                          :beforeRefundMoney="beforeRefundMoney"
                          :beforechangeMoney="beforechangeMoney"
                          :typeNum="typeNum"
                          :isTurnTicket="isTurnTicket"
                          :baggage="baggage"
                          :itemTimeOne="itemTimeOne"
                          :itemTimeTwo="itemTimeTwo"
                          :itemTimeThree="itemTimeThree"
                          :salePrice="salePrice">
        </flight-quit-rule>
        <!--前后以一小时最低价-->
        <alert2 v-if="showLowPrice && flightTo.withinTwoHoursLowestPriceList.length > 0" @alert="showLowPrice = false">
          <div class="alertLowPrice">
            <p>您选择的时间段内有更低的航班:</p>
            <ul>
              <li v-for="(item ,index) in flightTo.withinTwoHoursLowestPriceList" class="lowPriceItem" @click="checkPriceAjaxLow(item)">
                <div>
                  <p class="lowSub"><span>起</span><span>{{item.departureTime}}</span><span>{{item.fromAirportName}}</span></p>
                  <p class="lowSub"><span>降</span><span>{{item.arrivalTime}}</span><span>{{item.toAirportName}}</span></p>
                  <p class="lowSub"><span>{{item.carrierName}}</span><span>{{item.aircraft.code}}</span><span v-if="item.aircraft.type == 1">小机型</span><span v-if="item.aircraft.type == 2">中机型</span><span v-if="item.aircraft.type == 3">大机型</span></p>
                </div>
                <div class="lowMoney">
                  ¥{{item.salePrice}}
                </div>
              </li>
            </ul>
            <p @click="checkPriceAjaxLow(flightTo.currentCabin)">继续选择原航班</p>
          </div>
        </alert2>
      </Popup>
    </div>
    <!--价格变动弹框 -->
    <alert1 v-show="alertShowPriceChange" class="ll" :confirmInfo="message" @confirmBtnL="cancelA" @confirmBtnR="successA">
    </alert1>
    <confirmOne :confirmOneInfo="confirmOneInfo" @confirmOneBtn="confirmOneBtn" v-show="confirmOneShow"></confirmOne>
    <!--余票弹窗-->
    <confirmOne :confirmOneInfo="message" @confirmOneBtn="cancelA" v-show="alertShowTicketsChange"></confirmOne>
    <returnalert v-show = 'returenDate' class="return-alert">
      <div class="alert-con">
        <div>去程时间大于返程时间</div>
        <p>去程时间:{{go_date}}</p>
        <p>返程时间:{{to_date}}</p>
      </div>
      <div class="return-but" @click="close_date">重新添加</div>
    </returnalert>
    <date @dateClick="dateClick" @dateBack="dateBack" v-show="dateShow" :max="max" :openTime="to_date"></date>
    <!--前后以一小时最低价-->
    <alert2 v-if="showLowPrice && flightTo.withinTwoHoursLowestPriceList.length > 0" @alert="showLowPrice = false">
      <div class="alertLowPrice">
        <p>您选择的时间段内有更低的航班:</p>
        <ul>
          <li v-for="(item ,index) in flightTo.withinTwoHoursLowestPriceList" class="lowPriceItem" @click="checkPriceAjaxLow(item)">
            <div>
              <p class="lowSub"><span>起</span><span>{{item.departureTime}}</span><span>{{item.fromAirportName}}</span></p>
              <p class="lowSub"><span>降</span><span>{{item.arrivalTime}}</span><span>{{item.toAirportName}}</span></p>
              <p class="lowSub"><span>{{item.carrierName}}</span><span>{{item.aircraft.code}}</span><span v-if="item.aircraft.type == 1">小机型</span><span v-if="item.aircraft.type == 2">中机型</span><span v-if="item.aircraft.type == 3">大机型</span></p>
            </div>
            <div class="lowMoney">
              ¥{{item.salePrice}}
            </div>
          </li>
        </ul>
        <p @click="checkPriceAjaxLow(flightTo.currentCabin)">继续选择原航班</p>
      </div>
    </alert2>
  </div>
</template>
<script>
  import alert1 from "components/confirm.vue"
  import alert2 from "components/alert.vue"
  import confirmOne from "components/confirmOne.vue"
  import {Indicator,Toast} from "mint-ui"
  import returnalert from 'components/alert.vue';
  import date from 'components/date.vue';
  import Scroll from "../../../common/scroll/scroll.vue"
  import { Popup, TransferDomDirective as TransferDom} from 'vux'
  import flightQuitRule from '../../../components/flight/flight-quit-rule.vue'
  export default{
    data(){
      return {
        lowPriceRule: [], // 请求接口拿到数组
        quitTicketRule: [], //数据筛选后拿到的对于数据
        item: {},
        indexs: 0,
        flightPriceNum: 0,
        itemTimeOne: '',
        itemTimeTwo: '',
        itemTimeThree: '',
        baggage: 20,
        isTurnTicket: '',
        typeNum: 1,
        beforeRefundTime: [],
        beforeRefundMoney: [],
        beforechangeMoney: [],
        popupQuitRulesVisible: false,
        navList: ['退改详情', '行李说明'],
        showLowPrice:false,
        goback:false,
        alertShowPriceChange:false,
        alertShowTicketsChange:false,
        flightPriceDto:'',
        message:"价格变动",
        dateTitle: '10月10日周一',
        titleGoDate: "06:40",
        titleGoCity: '首都机场T2',
        titleGoType: '东方航空HU7604',
        titleBackDate: "06:40",
        titleBackCity: '首都机场T2',
        titleLineInfo: '中型机',
        titleBackType: '经济舱',
        items:[
          {
            cangwei:'经济舱',
            discount:'全价',
            money:'¥1240'
          },
          {
            cangwei:'经济舱',
            discount:'全价',
            money:'¥1240'
          },
          {
            cangwei:'经济舱',
            discount:'全价',
            money:'¥1240'
          },
          {
            cangwei:'经济舱',
            discount:'全价',
            money:'¥1240'
          },
          {
            cangwei:'经济舱',
            discount:'全价',
            money:'¥1240'
          },
        ],
        confirmOneInfo:'',
        confirmOneShow:false,
        returenDate:false,
        dateShow:false,
        obervious:true,
        isDirect:false,
      }
    },
    directives: {
      TransferDom
    },
    components: {alert1:alert1,confirmOne,returnalert,date,alert2:alert2,Popup, flightQuitRule},
    methods: {
      closePopupContent() {
        this.popupQuitRulesVisible = false;
      },
      //调用接口拿到舱位退改详情信息
      onShowPopupRule(itemCabinCode, salePrice, item, index) {
        let that = this;
        this.salePrice = salePrice;
        that.item = item;
        that.indexs = index;
        let rulePriceDetailObj = {
          cabinCode: itemCabinCode,
          carrierCode: that.$route.query.carrierCode,
          fromAirport: that.$route.query.fromAirport,
          toAirport: that.$route.query.toAirport
        };
        that.$flight.flightRefundChangeDetail(rulePriceDetailObj, function (res) {
          that.popupQuitRulesVisible = true;
          that.typeNum = res.type;
          if(that.typeNum == 1) {
            that.beforechangeMoney = res.changeAmountList;
            that.beforeRefundTime = res.headers;
            that.beforeRefundMoney = res.refundAmountList;
            that.isTurnTicket = res.endorseRule;
          } else if(that.typeNum == 2) {
            that.beforechangeMoney = res.changeAmountList.splice(0, 1);
            that.beforeRefundTime = res.headers.splice(0, 1);
            that.beforeRefundMoney = res.refundAmountList.splice(0, 1);
            that.isTurnTicket = res.endorseRule;
          } else if(that.typeNum == 3) {
            that.itemTimeOne = res.headers[0];
            that.itemTimeTwo = res.headers[1];
            that.itemTimeThree = res.headers[2];
          }
          that.baggage  = parseInt(res.baggage.replace(/[^0-9]/ig,"") );
        }, function (err) {
          that.$router.push({
            path: 'error'
          })
        })
      },
      // 筛选后端返回的对于字母数组数据
      _getPriceRules() {
        var that = this;
        let priceRuleObj = that.$store.state.flightTo.currentList.cabinShowList;
        let getLowPriceRule = that.lowPriceRule;
        priceRuleObj.forEach((arr, index) => {
          getLowPriceRule.forEach((newArr, newIndex) => {
            if(arr.cabinCode === newArr.cabinCode) {
              that.quitTicketRule.push(getLowPriceRule[newIndex])
            }
          })
          return;
        })
      },
      confirmOneBtn(){
        this.confirmOneShow = false;
      },
      back(){
        this.$router.go(-1);
      },
      cancelA(){//      价格变动弹窗  取消按钮
        this.popupVisible3 = false;
        this.$router.go(-1);
      },
      successA(){//      价格变动弹窗  确认按钮
        // 价格变动 把变动后的价格赋值给当前显示价格
        var currentCabin =  this.$store.state.flightTo.currentCabin;
        currentCabin.facePrice = currentCabin.salePrice = this.checkPrice;

        this.alertShowPriceChange = false;
        this.$router.push({
          name:'backflightList',
          params:{
            from:'toflightListDetail'
          }
        })
      },
      checkPriceAjaxLow(cabinShowList){   //拿的数据字断名不一样,只能在开一个请求
        this.showLowPrice = false;
        this.$store.state.flightTo.currentCabin = cabinShowList;
        var that = this;
        var searchDto = {
          fromDate:cabinShowList.departureDate,
          flightNo:cabinShowList.flightNo,

          agreementPolicyId: cabinShowList.agreementPolicyId,
          productType: cabinShowList.productType,

          cabinCode:cabinShowList.cabinCode,
          fromCityCode:cabinShowList.fromCity,
          toCityCode:cabinShowList.toCity,
          routeRuleItemId:cabinShowList.routeRuleItemId,
          withinTwoHoursLowestPrice:cabinShowList.withinTwoHoursLowestPrice == undefined  || cabinShowList.withinTwoHoursLowestPrice == true&& true
        };
        that.$store.state.flightTo.searchDto = searchDto; //用于创单使用
        that.$vux.loading.show({
          text: '加载中...'
        })
        that.$flight.checkPrice({
          carrierCode:cabinShowList.carrierCode,
          flightNo:cabinShowList.flightNo,

          agreementPolicyId: cabinShowList.agreementPolicyId,
          productType: cabinShowList.productType,

          departureDate:cabinShowList.departureDate,
          departureTime:cabinShowList.departureTime,

          arrivalDate:cabinShowList.arrivalDate,//到达时间 yyyy-MM-dd
          arrivalTime:cabinShowList.arrivalTime,//到达时间 HH:mm

          fromAirport:cabinShowList.fromAirport,
          toAirport:cabinShowList.toAirport,

          fromCity:cabinShowList.fromCity,
          toCity:cabinShowList.toCity,

          routeRuleItemId: cabinShowList.routeRuleItemId,
          productType: cabinShowList.productType,
          cabinCode:cabinShowList.cabinCode,

          subCabinCode:cabinShowList.subCabinCode,
          cabinClass:cabinShowList.cabinClass,
          originalPrice:cabinShowList.originalPrice
        },function (data) {
          that.$vux.loading.hide();
          //保存去程的航班数据,去选返程列表
          that.$store.state.flightTo.checkData = data.data;
          switch (data.code) {
            case '-1'://一切正常
              //判断是否是单程和返程 单程=>1,返程=>2;
              searchDto.checkPriceRouteRuleItemId = data.data.routeRuleItemId;
              that.returnFlightList();
              break;
            case '3'://价格变化
              that.alertShowPriceChange = true;
              that.message = data.message;
              break;
            case '4':
              that.$vux.toast.show({
                type:'text',
                content:data.message
              });
              break;
            case '105':
              that.alertShowTicketsChange = true;
              that.message = data.message;
              break;

          }
        },function () {
          that.$vux.loading.hide();
          that.$vux.toast.show({
            type:'text',
            content:'验价失败'
          });
        });
      },
      bookingTicket() {
        let that = this;
        that.$store.state.flightTo.cabinIndex = that.indexs;
        that.$store.state.flightTo.currentCabin = that.item;
        if (that.item.withinTwoHoursLowestPrice) {//如果当前为最低航班,直接验价
          that.checkPriceAjaxLow(that.item);
        } else {//否则,弹出低价框
          that.$store.state.flightTo.withinTwoHoursLowestPriceList = that.item.withinTwoHoursLowestPriceList;
          that.showLowPrice = true;
        }
      },
      yuding(item,index){
        this.$store.state.flightTo.cabinIndex = index;
        this.$store.state.flightTo.currentCabin = item;
        if(item.withinTwoHoursLowestPrice){//如果当前为最低航班,直接验价
          this.checkPriceAjaxLow(item);
        }else{//否则,弹出低价框
          this.$store.state.flightTo.withinTwoHoursLowestPriceList = item.withinTwoHoursLowestPriceList;
          this.showLowPrice = true;
        }
      },
      returnFlightList(){    //返程请求
        var that = this;
        let godate = parseInt(new Date(that.$store.state.flight.fromDate).getTime());
        let todate = parseInt(new Date(that.$store.state.flight.returnTimes).getTime());
        if(godate>todate){
          that.returenDate = true;
          Indicator.close();
        }else{
          this.$router.push({
            name:'backflightList',
            params:{
              from:'toflightListDetail'
            }
          })
        }
      },
      close_date(){
        this.returenDate = false;
        this.dateShow = true;
      }, //关闭时间弹窗
      dateBack(){
        this.dateShow = false;
      },//关闭时间插件
      dateClick(msg){
        this.dateShow = false;
        this.$store.state.flight.returnTimes = msg;
      }//时间的选择
    },
    mounted() {
      let that = this;
      that.$store.state.flight.cabinIndex = 0;
      Indicator.close();
      that.$vux.loading.hide();
      let lowPriceObj = {
        carrierCode: this.$route.query.carrierCode,
        fromAirport: this.$route.query.fromAirport,
        toAirport: this.$route.query.toAirport
      }
      that.$flight.flighOptimalRule(lowPriceObj, function (res) {
        that.lowPriceRule = res
        that._getPriceRules();
      }, function (err) {
        that.$router.push({
          path: 'error'
        })
      })
    },
    computed:{
      flightType(){ //      机型转换
        var flightType = '';
        if( this.flightTo.currentList.aircraftDto){
          if(this.flightTo.currentList.aircraftDto.type){
            var type = this.flightTo.currentList.aircraftDto.type ;
            if(type == 3){
              flightType = '大型机';
            }else if(type == 2){
              flightType = '中型机';
            }else if(type == 1){
              flightType = '小型机'
            }
          }
        }

        return flightType

      },
      index(){
        return this.$store.state.flightTo.index
      },
      flight(){
        return this.$store.state.flight
      },
      flightTo(){
        return this.$store.state.flightTo
      },
      hadeText(){
        return this.$store.state.flight.goToText
      },
      go_date(){
        return this.$store.state.flight.fromDate
      },
      to_date(){
        return this.$store.state.flight.returnTimes
      },
      popInfo(){
        return this.$store.state.flight.popInfo;
      },
      popInfo1(){
        return this.$store.state.flight.popInfo1;
      },
      tabInfo(){
        return this.$store.state.flight.tabInfo;
      },
    },
    watch:{

    }
  }


</script>

<!--预订按钮-->
<style rel="stylesheet/scss"  scoped>
  .item {
    background-color: #fff;
  }
  .item>.item-flex {
    display: flex;
    padding: .65rem .5rem;
    line-height: .85rem;
    border-bottom: 1px solid #eee;
  }
  .item .r-money {
    flex: 0 0 30%;
    text-align: right;
  }
  .itemSub{
    flex: 0 0 70%;
    color: #999;
  }
  .detail-title {
    padding: .5rem;
    font-size: .65rem;
    color: #666;
    border-bottom: 1px solid #eee;
  }
  .item p{
    float: left;
    line-height: 1.3rem ;
  }
  .cangwei{
    width: 40%;
    color: #999;
    font-size: .6rem;
  }
  .discount{
    width: 4.5rem;
    height: 1.3rem;
    line-height: 1.3rem;
  }
  p.discount1{
    width: 30%;
    height: 1rem;
    font-size: .55rem !important;
    background-color: #0094db;
    margin-top: .15rem;
    text-align: center;
    color: #fff;
    padding: 0 .125rem 0 .125rem;
    border-radius: .125rem;
    opacity: 0.5;
    line-height: 1rem;
    box-sizing: border-box;
  }
  .isDirect{
    width: 4.5rem;
    height: 1.3rem;
  }
  p.money{
    float: left;
    width: 30%;
    color: #f60;
    text-align: left;
    height: 1.3rem;
    font-size: .8rem;
    line-height: 1.3rem;
  }
  .money {
    color: #f60!important;
  }
  .moneyIco{
    font-size: .65rem;/*px*/
  }
  .item .yuding{
    float: right;
    width: 2.2rem;
    text-align: center;
    color: #fff;
    height: 2.25rem;
    line-height: 2.25rem;
    font-size: .75rem;
    background-color: #46a1bb;
    border-radius: .2rem ;
    box-sizing: border-box;
  }
  .item .yudingText{
    line-height: 1.25rem;
    font-size: .75rem;
    width: 2.2rem;
    border-radius: .2rem .2rem 0 0;
    border: 1px solid #46a1bb;
    background-color: #46a1bb;
  }
  .item .lowPrice{
    width: 2.2rem;
    line-height: 1rem;
    text-align: center;
    background-color: #fff;
    color: #46a1bb;
    border: 1px solid #46a1bb;
    border-radius: 0 0 .2rem .2rem;
    font-size: .55rem;
  }
</style>
<style scoped>
  /*header*/
  .outer {
    width: 100%;
    position: relative;
    background-color: #e6e6e6;
    font-size: .6rem;/*px*/
    height: 100%;
    overflow: hidden;
  }
  .box {
    top: 0;
    left: 0;
    right: 0;
  }
  .header {
    background: #46a1bb;
    height: 2.2rem;
    background-size: cover;
    color: #fff;
    padding: 0 .75rem;
    width: 100%;
    box-sizing: border-box;
    display: flex;
  }
  .backImg {
    flex: 0 0 15%;
    height: 2.2rem;
    line-height: 2.2rem;
    text-align: left;
    background: url('../../../assets/images/back.png') no-repeat left center;
    background-size: .6rem 1.1rem;
  }
  .main {
    position: relative;
    height: calc(100% - 8.7rem);
    background-color: #e6e6e6;
  }
  .titleCity {
    height: 2.2rem;
    /*margin-top: 1.25rem;*/
    flex: 0 0 70%;
    text-align: center;
    line-height: 2.2rem;
    font-size: .9rem;/*px*/
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /*title*/
  .title {
    text-align: center;
    background-color: #fff;
    width: 100%;
    height: 6.5rem;
    margin: 0 .25rem .25rem 0;
  }
  .titleDate {
    font-size: .75rem; /*px*/
    text-align: left;
    padding: .65rem .5rem;
  }
  .title1 {
    display: flex;
    width: 100%;
    line-height: 1.5rem;
    font-size: 1.15rem; /*px*/
  }
  .title2 {
    line-height: 1.25rem;
    display: flex;
    width: 100%;
  }
  .title3 {
    line-height: 1.25rem;
    display: flex;
    width: 100%;
  }
  .titleGoDate {
    flex: 0 0 30%;
  }
  .titleBackDate {
    flex: 0 0 30%;
  }
  .titleLineMiddle {
    flex: 0 0 40%;
    height: 1.5rem;
    background: url("../../../assets/images/goBackLine.png") no-repeat center;
    background-size: 5.65rem .25rem;
  }
  .titleGoCity {
    flex: 0 0 30%;
  }
  .flightDuration{
    flex: 0 0 40%;
    text-align: center;
  }
  .titleBackCity {
    flex: 0 0 30%;
  }
  .titleGoType {
    flex: 0 0 30%;
    float: left;
    text-align: center;
  }
  .titleLineInfo {
    flex: 0 0 40%;
  }
  .titleBackType {
    width: 7rem;
    float: right;
    margin-right: .25rem;
  }
</style>
<style rel="stylesheet/scss" lang="scss">
  .toastYuError{
    width:12rem;
    text-align: center;
  .mint-toast-text{
    font-size: .7rem!important;/*px*/
  }
  }
  .mint-indicator-mask{
    z-index: 999999998;
  }
  .mint-indicator-wrapper{
    z-index: 999999999;
  }
</style>
<!--前后一小时最低价弹窗-->
<style scoped>
  .alertLowPrice{
    width: 15rem;
    box-sizing: border-box;
  }
  .alertLowPrice>ul{
    max-height: 15rem;
    overflow: auto;
  }
  .alertLowPrice>p:first-of-type{
    background-color: #46a1bb;
    color: #fff;
    font-size: .7rem;
    padding: .5rem 0;
  }

  .alertLowPrice>p:last-of-type{
    background-color: #46a1bb;
    color: #fff;
    padding: .5rem 0;
    font-size: .7rem;
  }
  .lowPriceItem>div:first-child{
    font-size: .65rem;
  }


  .lowPriceItem{
    display: flex;
    justify-content: space-between;
    padding:.45rem 1.2rem .45rem 1.75rem;
    font-size: .75rem;
    line-height: 1rem;
    border-bottom:1px solid #ddd;
  }

  .lowPriceItem:last-of-type{
    border: none;
  }


  .lowSub{
    text-align: left;
  }

  .lowSub>span{
    margin-right: .375rem;
  }

  .lowMoney{
    line-height: 3rem;
    font-size: 1.25rem;
    color: #f60;
  }
</style>
